/**
 * Created by NickNi on 2022/4/15.
 */
import React from 'react';
import { Table, Form, Input, Button, DatePicker, Row, Col, Card, Modal } from 'antd';
import { queryLogList, queryFileData } from '../../service';
import moment from 'moment';
import ReactJson from 'react-json-view';
// import type { DatePickerProps } from 'antd';
// import { DownOutlined } from '@ant-design/icons';
// let columns: any;
interface IProps {}
interface IState {
    columns?: any;
    visible: boolean;
    fileData: any;
    logList: any;
    total: Number;
    pageSize: Number;
    pageNum: Number;
    isLoading: boolean;
}
class LodListTable extends React.Component<IProps, IState> {
    constructor(props: IProps) {
        super(props);
        this.state = {
            columns: [
                {
                    title: '源文件ID',
                    dataIndex: 'fileId',
                    width: 300,
                    key: 'fileId',
                    fixed: 'left',
                },
                {
                    title: '出境数据的类型',
                    dataIndex: 'dataType',
                    width: 100,
                    key: 'dataType',
                },
                {
                    title: '用途',
                    dataIndex: 'purpose',
                    width: 100,
                    key: 'purpose',
                },
                {
                    title: '用敏感度标签途',
                    dataIndex: 'sensitivityTag',
                    width: 100,
                    key: 'sensitivityTag',
                },
                {
                    title: '行业',
                    dataIndex: 'industry',
                    width: 100,
                    key: 'industry',
                },
                {
                    title: '地区',
                    dataIndex: 'region',
                    width: 100,
                    key: 'region',
                },
                {
                    title: '类型',
                    dataIndex: 'companyType',
                    width: 100,
                    key: 'companyType',
                },
                {
                    title: '员工人数',
                    dataIndex: 'employeeNum',
                    width: 100,
                    key: 'employeeNum',
                },
                {
                    title: 'Duns',
                    dataIndex: 'duns',
                    width: 600,
                    key: 'duns',
                },
                {
                    title: '公司名称',
                    dataIndex: 'companyName',
                    width: 100,
                    key: 'companyName',
                },
                {
                    title: '省份(地区)',
                    dataIndex: 'province',
                    width: 100,
                    key: 'province',
                },
                {
                    title: '出境日期',
                    dataIndex: 'sendGlobalTime',
                    width: 100,
                    key: 'sendGlobalTime',
                },
                {
                    title: '工商数据',
                    dataIndex: 'comment',
                    width: 100,
                    key: 'comment',
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    fixed: 'right',
                    render: (record: any) => (
                        <span>
                            <Button onClick={() => this.getFileData(record)}>查看源数据</Button>
                        </span>
                    ),
                },
            ],
            visible: false,
            fileData: {},
            logList: [],
            total: 0,
            pageSize: 10,
            pageNum: 1,
            isLoading: false,
        };
    }
    componentWillMount() {
        let data = {
            startTime: '2022-05-01',
            endTime: '2022-05-01',
            currentPage: 1,
            pageSize: 20,
            Duns: '',
            companyName: '',
            companyType: '',
            industry: '',
            employeeNum: '',
        };
        this.getLogLsitData(data);
    }
    getLogLsitData = (props: any) => {
        this.setState({ isLoading: true });
        queryLogList(props).then((res) => {
            if (res) {
                let { data, total } = res;
                this.setState({
                    logList: data,
                    total: total,
                    pageNum: props.currentPage,
                    isLoading: false,
                });
            }
        });
    };
    getFileData = (recoed: any) => {
        let data = {
            fileId: recoed.fileId,
        };
        queryFileData(data).then((res) => {
            if (res) {
                let { data } = res;
                this.setState({ fileData: data, visible: true });
            }
        });
    };
    onFinish = (values: any) => {
        console.log('Success:', values);
        let data = {
            startTime: moment(values.startTime).format('YYYY-MM-DD'),
            endTime: moment(values.endTime).format('YYYY-MM-DD'),
            currentPage: 1,
            pageSize: 20,
            Duns: values.Duns,
            companyName: values.companyName,
            companyType: values.companyType,
            industry: values.industry,
        };
        console.log(data);
        this.getLogLsitData(data);
    };
    onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    onOk = () => {
        console.log('onOk');
        this.setState({ visible: false });
    };
    onPageChange = (page: any) => {
        console.log(page);
        let data = {
            startTime: '2022-05-01',
            endTime: '2022-05-01',
            currentPage: page,
            pageSize: this.state.pageSize,
            Duns: '',
            companyName: '',
            companyType: '',
            industry: '',
            employeeNum: '',
        };
        this.getLogLsitData(data);
    };

    render() {
        const dateFormat = 'YYYY-MM-DD';
        let paginationProps: any;
        paginationProps = {
            showSizeChanger: false,
            showQuickJumper: false,
            showTotal: () => `共${this.state.total}条`,
            pageSize: this.state.pageSize,
            current: this.state.pageNum,
            total: this.state.total,
            onChange: this.onPageChange,
        };
        return (
            <div className="gutter-example">
                {/* <BreadcrumbCustom breads={['表格', '基础表格']} /> */}
                <Row gutter={16}>
                    <Col className="gutter-row" md={24}>
                        <div className="gutter-box">
                            <Card title="数据日志" bordered={false}>
                                <Form
                                    name="basic"
                                    labelCol={{ span: 10 }}
                                    wrapperCol={{ span: 18 }}
                                    initialValues={{ remember: true }}
                                    onFinish={this.onFinish}
                                    onFinishFailed={this.onFinishFailed}
                                    autoComplete="off"
                                    layout="inline"
                                >
                                    <Form.Item label="开始时间" name="startTime">
                                        <DatePicker format={dateFormat} />
                                    </Form.Item>
                                    <Form.Item label="结束时间" name="endTime">
                                        <DatePicker format={dateFormat} />
                                    </Form.Item>
                                    <Form.Item label="Duns" name="Duns">
                                        <Input />
                                    </Form.Item>
                                    <Form.Item label="公司名称" name="companyName">
                                        <Input />
                                    </Form.Item>
                                    <Form.Item label="公司类型" name="companyType">
                                        <Input />
                                    </Form.Item>
                                    <Form.Item label="行业" name="industry">
                                        <Input />
                                    </Form.Item>
                                    <Form.Item>
                                        <Button type="primary" htmlType="submit">
                                            {' '}
                                            Submit
                                        </Button>
                                    </Form.Item>
                                </Form>
                                <Table
                                    columns={this.state.columns}
                                    dataSource={this.state.logList}
                                    scroll={{ x: 1300 }}
                                    pagination={paginationProps}
                                    loading={this.state.isLoading}
                                />
                            </Card>
                        </div>
                    </Col>
                </Row>
                <Modal
                    title="数据详情"
                    centered
                    visible={this.state.visible}
                    onOk={this.onOk}
                    onCancel={this.onOk}
                    width={1000}
                >
                    <ReactJson src={this.state.fileData} />
                </Modal>
            </div>
        );
    }
}
export default LodListTable;
